<extend name="Common:base"/>
<block name="head">
  <style>
    .el-table__body tr.current-row>td{
      background: rgba(157, 195, 232, 0.7);
    }
    .el-tabs__header{
      border-top:2px solid #ea4b4b;
      border-bottom: 1px solid #c51f1f;
    }
    .el-dialog .el-tabs__header{
      border-top:none;
    }
    .el-tabs--border-card .el-tabs__item{
      border-left: none;
    }
    .el-tabs--border-card .el-tabs__item.is-active {
      background-color: #fff;
      border-right-color: #d3dce6;
      background: #544b8f;
      color: #fff;
    }
    .el-tabs--border-card .el-tabs__header {
      background-color: #fff;
      margin: 0;
    }
    .container > .wrapp > .el-row {
      margin-bottom: 6px;
    }
    .el-tabs--border-card .el-tabs__content{
      padding:0 9px 5px 9px;
    }
    .el-card, .el-menu--horizontal .el-submenu>.el-menu, .el-tabs--border-card{
      box-shadow: none;
    }
    .el-tabs--border-card{
      border: none;
    }
    .el-table__body tr.current-row>td{
      background: rgba(157, 195, 232, 0.7);
    }
    .el-tabs__item{
        font-family: Microsoft YaHei;
        color:#0d0f10;
        font-size: 14px;
    }
    .el-form-item__content{
      font-size: 16px;
    }
    .el-dropdown-menu {
      overflow-y: auto;
      max-height: 400px;
    }
  </style>
</block>
<block name="body">
  <div id="app" class="container">
    <div class="wrapp" v-show="show" style="display:none;">

      <el-row>
        <el-col :span="24">
          <el-form :inline="true" ref="searchForm" :model="searchForm">
            <el-form-item prop="start">
                <el-date-picker size="small" v-model="searchForm.start" 
                  placeholder="请选择起日期" 
                  @change="startDateChange"
                  >
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="end">
                <el-date-picker 
                  v-model="searchForm.end" 
                  placeholder="请选择止日期" 
                  @change="endDateChange"
                  size="small"
                  >
                </el-date-picker>
            </el-form-item>
            
            <el-form-item>
              <el-button size="small" @click="setField('lastWeek')">上周</el-button>
              <el-button size="small" @click="setField('lastMonth')">上月</el-button>
              <el-button size="small" @click="setField('week')">本周</el-button>
              <el-button size="small" @click="setField('month')">本月</el-button>
            </el-form-item>

            <el-form-item>
              <el-button type="info" size="small" icon="search" @click="search2">查询</el-button>
              <el-tooltip content="清空搜索框并刷新表格数据" placement="bottom-start">
                <el-button size="small" @click="resetBack" style="margin-left:10px;">重置</el-button>
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-tooltip content="点击刷新当前页面" placement="right">
                <el-button @click="refresh" size="small" type="danger">刷新</el-button>
              </el-tooltip>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table 
          :data="dataList" 
          border highlight-current-row
          v-loading="dataLoad" 
          element-loading-text="{:L('DATA_LOGIN')}"
          @sort-change="sortChange">
                    <el-table-column label="序号"  align="center" width="65" :formatter="handleIndex"  >
                    </el-table-column>

                    <el-table-column  align="center" prop="name"  label="名称"   width="150">
                      <template scope="scope">
                        <span v-if="isLink(scope.row.id)">
                          <a :href="getUrl(scope.row.id)">{{ scope.row.name }}</a>
                        </span>
                        <span v-else>{{ scope.row.name }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column sortable="custom"  align="center" prop="create_num" label="自锁数"  >
                    </el-table-column>

                    <el-table-column sortable="custom"  align="center" prop="today_v" label="成交数"  >
                    </el-table-column>

                    <el-table-column sortable="custom"  align="center" prop="conflict_to" label="冲突"  >
                    </el-table-column>

                    <el-table-column sortable="custom"  align="center" prop="conflict_from" label="被冲突"  >
                    </el-table-column>

                    <el-table-column sortable="custom"  align="center" prop="pulls_num" label="索取"  >
                    </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row type="type" justify="start" align="middle" class="row-bg">
        <el-col :span="12">
              <div class="grid-content bg-purple-light pull-right">
                <!-- page -->
                <include file="Common:_pagination" />
                <!-- / page -->
              </div>
        </el-col>
      </el-row>
    </div>
  </div>
</block>
<block name="scripts">
<script src="__PUBLIC__/js/calculate.js"></script>
  <script>
    window.defaultOption.hooks.delAll('mounted');

    window.defaultOption.setDatas({
      
      sortMap:{
        descending:'desc',
        ascending:'asc'
      },
      objType:"{$objType}"
    }).setForm('search',{
      start:'{$start}',
      end:'{$end}',
      objType:"{$objType}",
      id:"<?php echo I('get.id', 0)?>"
    }).setMethod('startDateChange', function(v){
      this.searchForm.start = v;
    }).setMethod('endDateChange', function(v){
      this.searchForm.end = v;
    }).setMethod('setField', function(v){
      if (v=='week') {
        this.searchForm.start = showWeekFirstDay();
        this.searchForm.end   = showWeekLastDay();
      } else if(v=='month'){
        this.searchForm.start = showMonthFirstDay();
        this.searchForm.end   = showMonthLastDay();
      }else if(v=='lastMonth'){
        this.searchForm.start = showLastMonthFirstDay();
        this.searchForm.end   = showLastMonthLastDay(); 
      } else if(v=='lastWeek'){
        this.searchForm.start = showLastWeekFirstDay();
        this.searchForm.end   = showLastWeekLastDay(); 
      }
      
      this.loadDatalist();
    }).setMethod('beforeList', function(data){
        var h = {
          name:"汇总",
          conflict_from:0,
          conflict_to:0,
          create_num:0,
          pulls_num:0,
          today_v:0,
          id:0
        };
        data.forEach(function(currentValue){
          for (var x in h) {
            if (x != 'name' && x !='id') {
              h[x] += parseInt(currentValue[x]);
            }
          }
        });
        data.push(h);
     return data;
  }).setVueHook('mounted', function(){
    this.show = true;
    if (!this.readySearch()) {
      this.loadDatalist();
    }
  }).setMethod('search2', function(){
    if (this.readySearch()) {
      this.$message({
        message:"请选择止日期",
        type:"error",
        showClose: true
      })
    } else {
      this.loadDatalist();
    }
  }).setMethod('getUrl', function(v){
      var s = [];
      s.push("start="+this.searchForm.start);
      s.push("end="+this.searchForm.end);
      return "{:U('index')}" + "?objType=" + this.objType + "&id=" + v +"&"+s.join("&");
  }).setMethod('readySearch', function(){
    return this.searchForm.start.length ==0 || this.searchForm.end.length==0;
  }).setMethod('resetBack', function(){
      window.location.href="{:U('index')}";
  }).setMethod('sortChange', function(info){
      if (info) {
        this.searchForm.sort_field = info.prop;
        this.searchForm.sort_order = this.sortMap[info.order];
      } else {
        delete this.searchForm.sort_field;
        delete this.searchForm.sort_order;
      }
      this.dataReload();
  }).setMethod('isLink', function(id){
    return id!=0 && this.objType!='Users';
  });





  </script>
</block>